<!--
 * hi-popup - 弹出层
 *
 * @author 济南晨霜信息技术有限公司
 * @mobile 18560000860 / 18754137913
 -->
<template>
    <view class="hi-popup" :class="_classes" :style="_styles" v-if="show">
        <view class="hi-popup__mask" @tap="handleMaskClick" v-if="mask"></view>
        <view class="hi-popup__content">
            <view class="hi-popup__header" v-if="header">
                <slot name="header">
                    <slot name="headerLeft"></slot>
                    <view class="hi-popup__title">
                        <slot name="title">{{ title }}</slot>
                    </view>
                    <slot name="headerRight"></slot>
                </slot>
            </view>
            <view class="hi-popup__close" v-if="close" @tap="handleCloseClick" :hover-class="hover">
                <slot name="close">
                    <hi-icon class="hi-popup__close__icon" :name="closeIcon"></hi-icon>
                </slot>
            </view>
            <view class="hi-popup__fixed hi-popup__fixed--top">
                <slot name="top"></slot>
            </view>
            <view class="hi-popup__body">
                <scroll-view scroll-y class="hi-popup__body__scroll-view" @scrolltolower="_emits('scrolltolower')" @scroll="_emits('scroll')">
                    <slot></slot>
                </scroll-view>
            </view>
            <view class="hi-popup__fixed hi-popup__fixed--bottom">
                <slot name="bottom"></slot>
            </view>
            <view class="hi-popup__footer" v-if="footer">
                <slot name="footer"></slot>
            </view>
        </view>
    </view>
</template>

<!-- 由于 HbuilderX 不支持 defineOptions() 写法，故只能在此处进行配置 -->
<script>
    export default { options: uni?.$hi?.config?.componentsOptions || {} };
</script>

<script setup>
    import { computed } from "vue";
    import props from "./props.js";

    // 组件属性
    const _props = defineProps(props);

    // 组件事件
    const _emits = defineEmits(["close", "scrolltolower", "scroll"]);

    // 组件类名
    const _classes = computed(() => {
        const classes = [];

        // 模式
        classes.push(`hi-popup--${_props.mode}`);

        // 是否显示
        if (_props.show) classes.push("hi-popup--show");

        // Header 边框
        if (_props.headerBorder) classes.push("hi-popup--header-border");

        // Footer 边框
        if (_props.footerBorder) classes.push("hi-popup--footer-border");

        return classes;
    });

    // 组件样式
    const _styles = computed(() => {
        const styles = [];

        // Mask
        if (_props.maskBg) styles.push(`--hi-popup-mask-background: ${_props.maskBg}`);

        // 宽
        if (_props.width) styles.push(`--hi-popup-content-width: ${_props.width}`);
        if (_props.maxWidth) styles.push(`--hi-popup-content-max-width: ${_props.maxWidth}`);

        // 高
        if (_props.height) styles.push(`--hi-popup-content-height: ${_props.height}`);
        if (_props.maxHeight) styles.push(`--hi-popup-content-max-height: ${_props.maxHeight}`);

        // 背景
        if (_props.bg) styles.push(`--hi-popup-content-background: ${_props.bg}`);

        // 圆角
        if (_props.radius) styles.push(`--hi-popup-content-border-radius: ${_props.radius}`);

        // Header
        if (_props.headerHeight) styles.push(`--hi-popup-header-height: ${_props.headerHeight}`);
        if (_props.headerBorderColor) styles.push(`--hi-popup-header-border-color: ${_props.headerBorderColor}`);
        if (_props.headerBorderWidth) styles.push(`--hi-popup-header-border-width: ${_props.headerBorderWidth}px`);
        if (_props.headerBorderStyle) styles.push(`--hi-popup-header-border-style: ${_props.headerBorderStyle}`);

        // Title

        if (_props.titleColor) styles.push(`--hi-popup-title-color: ${_props.titleColor}`);
        if (_props.titleFontSize) styles.push(`--hi-popup-title-font-size: ${_props.titleFontSize}`);
        if (_props.titleFontWeight) styles.push(`--hi-popup-title-font-weight: ${_props.titleFontWeight}`);

        // Close
        if (_props.closeColor) styles.push(`--hi-popup-close-color: ${_props.closeColor}`);
        if (_props.closeSize) styles.push(`--hi-popup-close-size: ${_props.closeSize}`);
        if (_props.closeRight) styles.push(`--hi-popup-close-right: ${_props.closeRight}`);
        if (_props.closeLeft) styles.push(`--hi-popup-close-left: ${_props.closeLeft}`);
        if (_props.closeTop) styles.push(`--hi-popup-close-top: ${_props.closeTop}`);
        if (_props.closeBottom) styles.push(`--hi-popup-close-bottom: ${_props.closeBottom}`);

        // Footer
        if (_props.footerHeight) styles.push(`--hi-popup-footer-height: ${_props.footerHeight}`);
        if (_props.footerBorderColor) styles.push(`--hi-popup-footer-border-color: ${_props.footerBorderColor}`);
        if (_props.footerBorderWidth) styles.push(`--hi-popup-footer-border-width: ${_props.footerBorderWidth}px`);
        if (_props.footerBorderStyle) styles.push(`--hi-popup-footer-border-style: ${_props.footerBorderStyle}`);

        return styles;
    });

    /**
     * 遮罩点击事件
     */
    function handleMaskClick() {
        // 遮罩可点击
        if (_props.maskClickable) {
            _emits("close");
        }
    }

    /**
     * 关闭按钮点击事件
     */
    function handleCloseClick() {
        _emits("close");
    }
</script>

<style lang="scss" scoped>
    .hi-popup {
        &__mask {
            position: var(--hi-popup-mask-position, fixed);
            width: var(--hi-popup-mask-width, 100%);
            height: var(--hi-popup-mask-height, 100%);
            top: var(--hi-popup-mask-top, 0);
            left: var(--hi-popup-mask-left, 0);
            right: var(--hi-popup-mask-right, 0);
            bottom: var(--hi-popup-mask-bottom, 0);
            background: var(--hi-popup-mask-background, var(--hi-background-overlay));
            opacity: 0;
            z-index: var(--hi-popup-mask-z-index, var(--hi-index-upper));
            overflow: var(--hi-popup-mask-overflow, hidden);
        }

        &__content {
            width: var(--hi-popup-content-width, 100%);
            max-width: var(--hi-popup-content-max-width, 80%);
            height: var(--hi-popup-content-height, auto);
            max-height: var(--hi-popup-content-max-height, 80%);
            background: var(--hi-popup-content-background, var(--hi-background-element));
            border-radius: var(--hi-popup-content-border-radius, 10px);
            opacity: 0;
            display: var(--hi-popup-content-display, flex);
            flex-direction: var(--hi-popup-content-flex-direction, column);
            overflow: var(--hi-popup-content-overflow, hidden);
            position: var(--hi-popup-content-position, fixed);
            left: var(--hi-popup-content-left, auto);
            top: var(--hi-popup-content-top, auto);
            right: var(--hi-popup-content-right, auto);
            bottom: var(--hi-popup-content-bottom, auto);
            transform: var(--hi-popup-content-transform, initial);
            z-index: var(--hi-popup-content-z-index, var(--hi-index-upper));
            padding: var(--hi-popup-content-padding, 0);
        }

        &__header {
            height: var(--hi-popup-header-height, auto);
            padding: var(--hi-popup-header-padding, 12px 15px);
            text-align: var(--hi-popup-header-text-align, center);
            font-size: var(--hi-popup-header-font-size, 1.25em);
            font-weight: var(--hi-popup-header-font-weight, 700);
            position: var(--hi-popup-header-position, relative);
            display: var(--hi-popup-header-display, flex);
            align-items: var(--hi-popup-header-align-items, center);
            justify-content: var(--hi-popup-header-justify-content, center);
            flex-shrink: var(--hi-popup-header-flex-shrink, 0);
            border-bottom: var(--hi-popup-header-border-width, 0) var(--hi-popup-header-border-style, solid)
                var(--hi-popup-header-border-color, var(--hi-border-color));
        }

        &__title {
            color: var(--hi-popup-title-color, inherit);
            font-size: var(--hi-popup-title-font-size, inherit);
            font-weight: var(--hi-popup-title-font-weight, inherit);
            flex: var(--hi-popup-title-flex, 1);
        }

        &__close {
            position: var(--hi-popup-close-position, absolute);
            color: var(--hi-popup-close-color, inherit);
            font-size: var(--hi-popup-close-size, 1.25em);
            right: var(--hi-popup-close-right, 10px);
            left: var(--hi-popup-close-left, auto);
            top: var(--hi-popup-close-top, 15px);
            bottom: var(--hi-popup-close-bottom, auto);
            z-index: var(--hi-popup-close-z-index, 8);
            display: var(--hi-popup-close-display, flex);
            align-items: var(--hi-popup-close-align-items, center);
            justify-content: var(--hi-popup-close-justify-content, center);
            font-weight: var(--hi-popup-close-font-weight, 700);
        }

        &__body {
            flex: var(--hi-popup-body-flex, 1);
            overflow: var(--hi-popup-body-overflow, hidden);
            display: var(--hi-popup-body-display, flex);

            &__scroll-view {
                width: var(--hi-popup-scroll-view-width, 100%);
            }
        }

        &__footer {
            flex-shrink: var(--hi-popup-footer-flex-shrink, 0);
            display: var(--hi-popup-footer-display, flex);
            align-items: var(--hi-popup-footer-align-items, center);
            height: var(--hi-popup-footer-height, auto);
            border-top: var(--hi-popup-footer-border-width, 0) var(--hi-popup-footer-border-style, solid)
                var(--hi-popup-footer-border-color, var(--hi-border-color));
        }

        &__fixed {
            flex-shrink: 0;
        }

        &--show {
            .hi-popup__mask {
                animation-duration: var(--hi-popup-mask-animation-duration, 300ms);
                animation-timing-function: var(--hi-popup-mask-animation-timing-function, linear);
                animation-fill-mode: var(--hi-popup-mask-animation-fill-mode, forwards);
                animation-name: hi-popup-mask-animate;
            }

            .hi-popup__content {
                animation-duration: var(--hi-popup-content-animation-duration, 300ms);
                animation-timing-function: var(--hi-popup-content-animation-timing-function, linear);
                animation-fill-mode: var(--hi-popup-content-animation-fill-mode, forwards);
                animation-name: hi-popup-content-animate;
            }

            &.hi-popup--center .hi-popup__content {
                animation-name: hi-popup-content-animate-center;
            }

            &.hi-popup--top .hi-popup__content {
                animation-name: hi-popup-content-animate-top;
                border-radius: var(--hi-popup-content-border-radius, 0 0 10px 10px);
            }

            &.hi-popup--bottom .hi-popup__content {
                animation-name: hi-popup-content-animate-bottom;
                border-radius: var(--hi-popup-content-border-radius, 10px 10px 0 0);
            }

            &.hi-popup--left .hi-popup__content {
                animation-name: hi-popup-content-animate-left;
                border-radius: var(--hi-popup-content-border-radius, 0 10px 10px 0);
            }

            &.hi-popup--right .hi-popup__content {
                animation-name: hi-popup-content-animate-right;
                border-radius: var(--hi-popup-content-border-radius, 10px 0 0 10px);
            }
        }

        &--center {
            .hi-popup__content {
                left: var(--hi-popup-content-left, 50%);
                top: var(--hi-popup-content-top, 50%);
                right: var(--hi-popup-content-right, auto);
                bottom: var(--hi-popup-content-bottom, auto);
                transform: var(--hi-popup-content-transform, translate(-50%, -50%));
                width: var(--hi-popup-content-width, 100%);
                max-width: var(--hi-popup-content-max-width, 80%);
                height: var(--hi-popup-content-height, auto);
                max-height: var(--hi-popup-content-max-height, 80%);
            }
        }

        &--top {
            .hi-popup__content {
                left: var(--hi-popup-content-left, 50%);
                top: var(--hi-popup-content-top, 0);
                right: var(--hi-popup-content-right, auto);
                bottom: var(--hi-popup-content-bottom, auto);
                transform: var(--hi-popup-content-transform, translate(-50%, 0));
                width: var(--hi-popup-content-width, 100%);
                max-width: var(--hi-popup-content-max-width, 100%);
                height: var(--hi-popup-content-height, auto);
                max-height: var(--hi-popup-content-max-height, 80%);
            }
        }

        &--bottom {
            .hi-popup__content {
                left: var(--hi-popup-content-left, 50%);
                top: var(--hi-popup-content-top, auto);
                right: var(--hi-popup-content-right, auto);
                bottom: var(--hi-popup-content-bottom, 0);
                transform: var(--hi-popup-content-transform, translate(-50%, 0));
                width: var(--hi-popup-content-width, 100%);
                max-width: var(--hi-popup-content-max-width, 100%);
                height: var(--hi-popup-content-height, auto);
                max-height: var(--hi-popup-content-max-height, 80%);
            }
        }

        &--left {
            .hi-popup__content {
                left: var(--hi-popup-content-left, 0);
                top: var(--hi-popup-content-top, 50%);
                right: var(--hi-popup-content-right, auto);
                bottom: var(--hi-popup-content-bottom, auto);
                transform: var(--hi-popup-content-transform, translate(0, -50%));
                width: var(--hi-popup-content-width, 100%);
                max-width: var(--hi-popup-content-max-width, 80%);
                height: var(--hi-popup-content-height, auto);
                max-height: var(--hi-popup-content-max-height, 100%);
            }
        }

        &--right {
            .hi-popup__content {
                left: var(--hi-popup-content-left, auto);
                top: var(--hi-popup-content-top, 50%);
                right: var(--hi-popup-content-right, 0);
                bottom: var(--hi-popup-content-bottom, auto);
                transform: var(--hi-popup-content-transform, translate(0, -50%));
                width: var(--hi-popup-content-width, auto);
                max-width: var(--hi-popup-content-max-width, 80%);
                height: var(--hi-popup-content-height, auto);
                max-height: var(--hi-popup-content-max-height, 100%);
            }
        }

        @keyframes hi-popup-mask-animate {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes hi-popup-content-animate {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes hi-popup-content-animate-center {
            0% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(0.5);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        @keyframes hi-popup-content-animate-top {
            0% {
                opacity: 0;
                transform: translate(-50%, -100%);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes hi-popup-content-animate-bottom {
            0% {
                opacity: 0;
                transform: translate(-50%, 100%);
            }
            100% {
                opacity: 1;
                transform: translate(-50%, 0);
            }
        }

        @keyframes hi-popup-content-animate-left {
            0% {
                opacity: 0;
                transform: translate(-100%, -50%);
            }
            100% {
                opacity: 1;
                transform: translate(0, -50%);
            }
        }

        @keyframes hi-popup-content-animate-right {
            0% {
                opacity: 0;
                transform: translate(100%, -50%);
            }
            100% {
                opacity: 1;
                transform: translate(0, -50%);
            }
        }
    }
</style>
